<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
import useAppStore from "@/store/index"
import { useGetIndexTaskApi } from "@/apis/order"
// import { getAllCharger, type ChargerItem } from '@/apis/charger'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { orderStauts } from "@/utils/format"

const appStore = useAppStore()
const userStore = useUserStore()

const { top, minHeight } = storeToRefs(appStore)
if (top.value === 0) {
  appStore.reset()
}
onShow(()=>{
	getDataList()
})
onPullDownRefresh(()=>{
	setTimeout(function () {
	getDataList()
	uni.stopPullDownRefresh();
	}, 500);
})
function getDataList(){
	useGetIndexTaskApi({
		state: 1,
		page: 1,
		limit: 10
	}).then(res =>{
		onTaskData.value = res.list
	})
	// useGetIndexOrderApi({
	// 	page: 1,
	// 	limit: 20
	// }).then(res =>{
	// 	onOrderData.value = res.list
	// })
}
const orderApplyData = ref<any[]>([])
const onTaskData = ref<any[]>([])

const notice = ref("公告！公告！公告！可关闭！可关闭！可关闭！")

function insertOrder(){
	uni.navigateTo({
		url: "/pages/order/addOrUpdate"
	})
}

function moreOrder(id: string){
	uni.navigateTo({
		url: "/pages/order/addOrUpdate?id=" + id
	})
}

function deleteOrderApply(id: string){
	// useDeleteOrderApplyApi(id).then(()=>{
	// 	uni.$u.toast("删除成功")
	// 	getDataList()
	// })
}

function startTask(){
	
}

function openDetail(id: any, status: number){
	if(status === 1) return
	uni.navigateTo({
		url: "/pages/order/orderInfo?id=" + id 
	})
}

function copy (content:string){
	uni.setClipboardData({
		data:content,
	})
}

// // 定义一个上拉触底的事件
// const myScrolltolower = () => {
//   if (chargerList.value.length >= counts.value)
//     return uni.showToast({ title: '已经到底' })
//   if (chargerList.value.length >= 40)
//     return uni.showToast({ title: '数据源已经加载完毕' })
//   page++
// }


</script>

<template>
  <view class="navbar content" style="padding-top: 100rpx;" >
    <view class="logo">
      <image src="@/static/img/logo.jpg" />
      <text>鹏尧 · 司机端</text>
    </view>

  <view class="">
	<u-notice-bar :text="notice" mode="closable"/>
	<scroll-view style="padding: 0 20rpx;" :style="{minHeight: minHeight - top - 32 + 'px'}" scroll-y show-scrollbar>
		<view v-for="item in onTaskData" :key="item.id" class="order_item" @click="openDetail(item.id, item.projectStatus)" :class="{on: item.ongoing}">
			<view class="head" style="margin-bottom: 10rpx;">
				<text>{{item.name}}</text>
				<u-tag v-if="item.ongoing" text="任务正在进行中" type="success"/>
			</view>
			<u-line/>
			<view class="route">
				<view class="">
					<text class="icon_q ti">起</text>
					<text class="station">{{item.loadingAddress}}</text>
				</view>
				<view class="due_time">
				    <view class="b_img">
				      <image src="@/static/img/doubleArrow.png"/>
				    </view>
				</view>
				<view class="">
					<text class="icon_h ti">终</text>
					<text class="station">{{item.unloadingAddress}}</text>
				</view>
			</view>
			<view class="projectId_text" @click.stop="copy(item.projectId)">订单号：{{item.projectId}}</view>
			<view class="info" v-if="item.projectStatus !== 1">
				<view class="info_item">
					<text>货物名称：&nbsp;{{item.cargoName}}</text>
					<view style="flex: 1; display: flex; align-items: center;">任务剩余时效：
					<u-icon name="clock-fill"/>
					&nbsp;
						<u-count-down 
						:time="new Date(item.endTime).getTime() - new Date().getTime() " 
						format="HH"/>
						&nbsp;时
					</view>
					
				</view>
				<view class="info_item">
					<text style="display: flex; align-items: center;">可接次数(剩余/总数)：&nbsp;
						<text style=" font-size: 20rpx;">{{item.remainder}}</text>
						<text style="display: inline-block; transform: translateY(-5rpx);">&nbsp;/&nbsp;</text>
						<text style="font-size: 35rpx; font-weight: 600; color: red;">{{item.trip}}</text>
					</text>
					
				</view>
				<!-- <view class="info_item">
					<text>单趟预估报酬：&nbsp;{{item.revenue}}</text>
				</view> -->
			</view>
			<view class="control info_item" v-if="item.projectStatus !== 1">
				<!-- <u-button type="primary" @click="startTask" text="开始任务"/> -->
			</view>
		</view>
		<u-empty
				v-if="!orderApplyData.length && !onTaskData.length"
		       mode="order"
		       text="目前没有任何可接任务"
		       textColor="#ffffff"
		       icon="http://cdn.uviewui.com/uview/empty/car.png"
		/>
	</scroll-view>

<!-- 	<u-loadmore 
			v-else
	        status="nomore"  
	        nomore-text="没有更多了" 
	    /> -->
  </view>
</view>
  <!-- <view class="add_btn" @click="insertOrder"/> -->
</template>

<style>
.on{
	/* box-shadow: inset 0 0 0 2px rgb(255, 42, 23); */
}
.projectId_text{
	color: #8a8a8a;
}
.projectId_text::after{
	content: "";
	display: inline-block;
	background: url("../../static/img/复制.png") no-repeat;
	background-size: cover;
	width: 35rpx;
	height: 35rpx;
	transform: translateY(10rpx);
}
.route{
	margin: 10rpx 0 15rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.ti{
  display: inline-block;
  color: white;
  border-radius: 6rpx;
  /* width: 40rpx; */
  /* height: 40rpx; */
  text-align: center;
  font-style: inherit;
  font-size: 24rpx;
  margin-right: 11rpx;
}
.icon_q{
  background-color: #FF6600;
  padding: 10rpx;
}
.icon_h{
  background-color: #999999;
  padding: 10rpx;
}
.b_img{
  width: 100%;
  display: inline-block;
}
.b_img image{
  width: 100%;
  height: 12px;
}
.zu{
  color: #333333;
  font-size: 24rpx;

}
.due_time{
  text-align: center;
  width: 100rpx;
  transform: translate(-11rpx, 0);
}
.station{
  /* flex-grow: 1; */
  max-width: 260rpx;
  /* display: -webkit-box; */
  font-size: 24rpx;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content{
	height: 100%;
	background: linear-gradient(to bottom, #edd9fd 10% ,#d8c6e6 20%, #F8F8F8 100%);
}
.order_item{
	position: relative;
	background-color: #fff;
	margin: 10px 0;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 24rpx;
}
.order_item .head{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.order_item .head>text:first-child{
	font-size: 30rpx;
	font-weight: 600;
}
/* .order_item .head>text:last-child{
	color: #ff3e03;
} */
.add_btn{
	position: fixed;
	bottom: 70rpx;
	right: 40rpx;
	width: 80rpx;
	height: 80rpx;
	background-color: #00b1ff;
	border-radius: 50%;
	background-image: url("@/static/img/add.png");
	background-repeat: no-repeat;
	background-size: cover;
	animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
	0% {
	transform: translateY(0);
	}
	50% {
	transform: translateY(-10px);
	}
	100% {
	transform: translateY(0);
	}
}

.info_item{
	display: flex;
	align-items: center;
}
.info_item>text{
	flex: 1;
}
.control{
	justify-content: left;
}
.control button{
	width: auto!important;
	margin: 0;
	height: 60rpx!important;
}
.control button:not(:last-child){
	margin-right: 10rpx;
}
.positioning{
	position: absolute;
	bottom: 10rpx;
	right: 20rpx;
}

/* 自定义导航条 */
/* .navbar {
  background-image: url(https://nn.trd.ink/appfile/images/navigator_bg.png);
  background-size: cover;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
} */

.navbar .logo {
  display: flex;
  align-items: center;
  height: 64rpx;
  padding-left: 30rpx;
}

.navbar .logo image {
  width: 60rpx;
  height: 39rpx;
}

.navbar .logo text {
  flex: 1;
  line-height: 28rpx;
  color: #000000;
  margin: 2rpx 0 0 20rpx;
  padding-left: 20rpx;
  border-left: 1rpx solid #fff;
  font-size: 26rpx;
}

.navbar .search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rpx 0 26rpx;
  height: 64rpx;
  margin: 16rpx 20rpx;
  color: #fff;
  font-size: 28rpx;
  border-radius: 32rpx;
  background-color: rgba(255, 255, 255, 0.5);
}

.navbar .icon-search {
  width: 500rpx;
}
.navbar .icon-search::before {
  /* display: flex; */
  margin-right: 10rpx;
  /* width: 200rpx; */
}

.navbar .icon-scan {
  font-size: 30rpx;
  padding: 15rpx;
}

.viewport {
  background-color: #f7f7f8;
}
.u-count-down__text{
	color: red!important;
}

</style>
